<template>
  <div class="insure-inline-detail">
    <table-index :table="table" />
    <!-- 展开收起 -->
    <div class="expand-wrapper" v-if="list.length > limitShowNum">
      <div class="expand-content" @click="expandClickFn">
        {{ expandStatus ? '收起更多' : '展开更多' }}
        <component :is="expandStatus ? 'icon-up' : 'icon-down'" />
      </div>
    </div>
  </div>
</template>
<script setup name="InsureInlineDetail">
  import { ref, computed } from 'vue'
  import { useTable } from '@/hooks/table'
  import { isValid } from '@/utils'

  const props = defineProps({
    list: Array,
  })
  const limitShowNum = 2
  const expandStatus = ref(false)

  // 处理显示的 table 数据
  const tableList = computed(() => {
    let list = JSON.parse(JSON.stringify(props.list))
    if (list.length > limitShowNum) {
      // 存在展开收起按钮
      if (!expandStatus.value) {
        return list.splice(0, limitShowNum)
      } else {
        return list
      }
    } else {
      return list
    }
  })

  // 展开更多点击事件
  const expandClickFn = () => {
    expandStatus.value = !expandStatus.value
  }

  // table 配置
  const table = computed(() => {
    return useTable({
      pagination: false,
      tableLoading: false,
      bordered: {
        wrapper: true,
        cell: true,
      },
      dataList: tableList.value,
      columns: [
        { title: '承保险种', dataIndex: 'insureKindTypeStr' },
        {
          title: '保额(万元)',
          dataIndex: 'insuredSum',
          render: (record) => {
            let val = record.insuredSum
            return isValid(val) ? val : '-'
          },
        },
        {
          title: '保险费(元)',
          dataIndex: 'insureAmt',
          render: (record) => {
            let val = record.insureAmt
            return isValid(val) ? val : '-'
          },
        },
      ],
    })
  })
</script>
<style lang="less" scoped>
  .insure-inline-detail {
    :deep {
      .arco-table {
        border: 1px solid #e5e6eb;
        border-bottom: none;
        border-right: none;
      }
      .arco-table-td {
        background-color: #fff !important;
      }
      th,
      td {
        border-right: 1px solid #e5e6eb !important;
      }
      td {
        border-bottom: 1px solid #e5e6eb !important;
      }
    }
  }
  .expand-wrapper {
    height: 34px;
    line-height: 54px;
    text-align: center;
    color: #1890ff;
    cursor: pointer;
    user-select: none;
    .expand-content {
      display: inline-block;
      padding: 0 40px;
    }
  }
</style>
